<template>
  <div>
    <div class="title">待处理事项</div>
    <div class="items">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content" @click="search(0,0)">
            <div class="descrition">今日新增报备</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.oneDaysCounts}}</span>
              )
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" @click="search(1)">
            <div class="descrition">待平台审核</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.waitExamineCounts}}</span>
              )
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" @click="search(6,0)">
            <div class="descrition">服务商今日取消</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.oneDaysCancelCounts}}</span>
              )
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content" @click="search(0,7)">
            <div class="descrition">近7日新增报备</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.oneWeeksCounts}}</span>
              )
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" @click="search(2)">
            <div class="descrition">待平台上架</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.waitShelfCounts}}</span>
              )
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" @click="search(6,7)">
            <div class="descrition">服务商近7日内取消</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.oneWeeksCancelCounts}}</span>
              )
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content" @click="search(0,30)">
            <div class="descrition">近30日新增报备</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.oneMonthsCounts}}</span>
              )
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" @click="search(3)">
            <div class="descrition">待采购人下单</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.waitPlaceOrderCounts}}</span>
              )
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" @click="search(6,30)">
            <div class="descrition">服务商近30日内取消</div>
            <div class="count">
              (
              <span class="font">{{waitingForHandle.oneMonthsCancelCounts}}</span>
              )
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="title">报备总览</div>
    <div class="items">
      <summary-report :summaryData="summary"></summary-report>
    </div>
  </div>
</template>

<script>
import SummaryReport from '@/components/public/SummaryReport.vue'
export default {
  name: 'OSSIndex',
  components: {
    SummaryReport,
  },
  data () {
    return {
      waitingForHandle: {
        oneDaysCancelCounts: 0,
        oneDaysCounts: 0,
        oneMonthsCancelCounts: 0,
        oneMonthsCounts: 0,
        oneWeeksCancelCounts: 0,
        oneWeeksCounts: 0,
        waitExamineCounts: 0,
        waitPlaceOrderCounts: 0,
        waitShelfCounts: 0,
      },
      summary: {
        allCount: 0,
        alreadyShelf: 0,
        cancel: 0,
        finished: 0,
        noPass: 0,
        pendingReview: 0,
        waitShelf: 0,
      },
    }
  },
  mounted () {
    this.queryRegistrarHandle()
    this.queryRegistrarInfo()
  },
  methods: {
    /**
     * 获取公告信息
     */
    queryRegistrarHandle () {
      this.$axios.get('/api/manage/home/queryRegistrarHandle').then(resp => {
        if (resp.success) this.waitingForHandle = resp.result
        else this.$message.error(resp.desc)
      })
    },
    queryRegistrarInfo () {
      this.$axios.get('/api/manage/home/queryRegistrarInfo').then(resp => {
        if (resp.success) this.summary = resp.result
        else this.$message.error(resp.desc)
      })
    },
    /**
     * status 状态
     * days 日期范围
     */
    search (status, days) {
      this.$router.push({
        path: 'OSSFilings',
        query: { status: status, days: days, index: true },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  width: 95%;
  height: 50px;
  border: 1px solid #bbbbbb;
  margin: 5px auto 0;
  padding: 16px 10px;
  background-color: #f3f3f3;
  font-weight: bold;
}
.items {
  width: 95%;
  border: 1px solid #bbbbbb;
  border-top: none;
  margin: 0 auto 20px;
  padding: 10px;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  min-height: 36px;
  padding: 8px 30px 5px 30px;
  border-bottom: 1px solid gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  &:hover {
    background-color: #f5f5f5;
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.descrition {
  float: left;
}

.count {
  float: right;
}
.count > .font {
  color: red;
  display: inline;
}
</style>
